<template>
    <div class="main">
        <div class="title">
            <span class="toBack" @click="back()">&lt;</span>
            <h2>{{sonlist.serviceName}}</h2>
        </div>
        <img :src="imgsrc"
            alt=""> 
        <div class="info">     
            <ul>
                <li>
                    <span class="fa fa-chevron-circle-down"></span>
                    每日测温
                </li>
                <li>
                    <span class="fa fa-chevron-circle-down"></span>
                    工具消毒
                </li>
                <li>
                    <span class="fa fa-chevron-circle-down"></span>
                    急速上门
                </li>
                <li>
                    <span class="fa fa-chevron-circle-down"></span>
                    慢必赔
                </li>
            </ul>
        </div>
        <div class="header">
            <div class="ord">
                <span class="text1">{{sonlist.serviceName}}</span>
                <span class="text2">直选</span>
            </div>
            <div class="ord1">
                <span class="text3">基础检查</span>
                <span class="text4">随叫随到</span>
            </div>
            <div class="ord2">
                <span class="text5">评分:4.5</span>
                <span class="text6">已有5424人选择</span>
                <span class="text7">好评率:90%</span>
            </div>
        </div>
        <div class="asd"></div>
        <div class="mainer">
            <h3>选择服务</h3>
            <div class="ord3">
                <ul>
                    <li>{{sonlist.serviceName}}</li>
                    <li>￥{{sonlist.price}}/一次</li>
                </ul>
                <ul>
                    <li>{{sonlist.serviceName}}</li>
                    <li>￥{{sonlist.price}}/一次</li>
                </ul>
            </div>
            <div class="ord4">
                <span>今往保障</span>
                <span>未服务全额退</span>
                <span>爽约包赔</span>
            </div>
        </div>
        <div class="group_13 flex-col">
          <div class="text-wrapper_8 flex-row justify-between">
            <span class="text_31">服务内容</span>
            <span class="text_32">用户评价</span>
            <span class="text_33">相关推荐</span>
          </div>
          <div class="group_21 flex-row justify-between">
            <div class="image-text_12 flex-col">
              <div class="box_8 flex-col"></div>
              <span class="text-group_6">在线客服</span>
            </div>
            <button class="button_1 flex-col">
              <span class="text_34" @click="goto">立即购买</span>
            </button>
          </div>
        </div>
    </div>
</template>

<script>
import {  mapActions,mapState } from 'vuex'
export default {
    data () {
        return {
            sonid:"",
            imgsrc:"",
            query:{}
        }
    },

    created () {
        this.show()

        console.log(this.$route)
    },
    computed:{
        ...mapState("servelist",["sonlist","imglist"]),
    },
    methods:{
        ...mapActions("servelist",["sonserve"]),
        show(){
            this.sonid = this.$route.query.id
            this.sonserve(this.sonid)
            this.imgsrc = this.imglist.filter(item => item.id == this.$route.query.fatherid)[0].img
            this.query = this.$route.query
            console.log(this.query)
        },
        back(){
            this.$router.back()
        },
        goto(){
            this.$router.push({
                path: "/home/serve/order/",
                query:this.query
            })
        }

    }
}
</script>

<style scoped>


.main {
    width: 100%;
    overflow: hidden;
}

.title {
    width: 100%;

    position: relative;
    padding: 0.1rem 0.1rem;

}

h2 {
    width: 0.72rem;
    height: 0.25rem;
    font-size: 0.18rem;
    font-weight: 600;
    color: black;
    line-height: 0.25rem;
    margin: auto;
}

.toBack {
    position: absolute;
    left: 0.2rem;
    top: 0.17rem;
    font-size: 0.18rem;
    line-height: 0.1rem;
    width: 0.11rem;
    height: 0.11rem;
    color: black;
}

img {
    width: 100%;
    height: 2.58rem;
    overflow: hidden;
}

.info {
    width: 100%;
    height: 0.2rem;
    background-color: #1FCCB6 ;
    font-size: 0.12rem;
    margin-top: -0.22rem;
}
.info ul {
    display: flex;
    justify-content: space-around;
    
}
.info li {
    line-height: 0.2rem;
    color: #fff;
}
.header{
    width: 100%;
    height: 1rem;
    margin: 0.05rem 0.1rem ;
    
}
.ord{
    width: 100%;
    height: 0.3rem;
    position: relative;
    
}
.ord .text1{
    
    width: 0.8rem;
    height: 0.28rem;
    font-size: 0.2rem;
    text-align: center;
    line-height: 0.28rem;
    position: absolute;
}
.ord .text2{
    font-size: 0.1rem;
    position: absolute;
    margin-left: 1rem;
    border-radius: 7px 7px 7px 0;
    background-color: rgba(69, 71, 85, 1);
}
.ord1{
    height: 0.2rem;
    position: relative;
    font-size: 0.01rem;
    margin-bottom: 0.5rem;
    
    
    
}
.text3{
    width: 0.75rem;
    border: 0.01rem solid;
    color: #00D2BB;
}
.text4{
    width: 0.75rem;
    margin-left: 0.1rem;
    border: 0.01rem solid;
    color: #00D2BB;
}
.ord2{
    height: 0.2rem;
    font-size: 0.01rem;
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-top: -0.5rem;
}
.asd{
    height: 0.1rem;
    background-color: aquamarine;
}
.mainer{
    height: 1.7rem;
    /* background-color: blue; */
    margin: 0.1rem ;
    
}
h3{    
    font-size: 0.2rem;
}
.ord3{
    height: 0.7rem;
    margin: 0.1rem 0;
    font-size: 0.16rem;
    display: flex;
    justify-content: space-around;
}
.ord3 ul{
    width: 1.2rem;
    height: 0.62rem;
    border: 0.01rem solid;
    text-align: center;    
}
.ord3 li{
    line-height: 0.3rem;
}
.ord4{
    height: 0.28rem;
    border: 0.01rem solid  #C9A663;
    display: flex;
    justify-content: space-around;
    font-size: 0.14rem;
    color: #C9A663;
    line-height: 0.28rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.group_13 {
  height: 1.2rem;
}

.text-wrapper_8 {
  width: 3.06rem;
  margin: 0 0.14rem 0 0.2rem;
}

.text_31 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
 
  text-align: center;
  white-space: nowrap;
  line-height: 0.2rem;
}

.text_32 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  
  text-align: center;
  white-space: nowrap;
  line-height: 0.2rem;
}

.text_33 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
 
  text-align: center;
  white-space: nowrap;
  line-height: 0.2rem;
}

.group_21 {
  width: 3.4rem;
  margin-top: 0.32rem;
}

.image-text_12 {
  margin: 0.04rem 0 0.02rem 0;
}

.box_8 {
  width: 0.2rem;
  height: 0.2rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6e4deb187acbbfdef3f18c7790b7cb6f2d4149a14ed4bff8a601e5f5da6337b9)
    100% no-repeat;
  background-size: 100% 100%;
  align-self: center;
}

.text-group_6 {
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  
  text-align: center;
  white-space: nowrap;
  line-height: 0.14rem;
  margin-top: 0.05rem;
}

.button_1 {
  background-color: rgba(0, 210, 187, 1);
  border-radius: 0.22rem;
  padding: 0.12rem 1.09rem 0.11rem 1.1rem;

  border: none;
}

.text_34 {
  color: rgba(255, 255, 255, 1);
  font-size: 0.14rem;  
  text-align: center;
  white-space: nowrap;  
  line-height: 0.2rem;
}
</style>